import 'package:flutter/material.dart';
import 'package:flutter_ui/common/app_theme.dart';

import '../pages/scan_page.dart';

/// 自定义底部导航栏，中间按钮凸起
class CustomBottomNavigationBar extends StatelessWidget {
  /// 当前选中的索引
  final int currentIndex;

  /// 点击事件回调
  final Function(int) onTap;

  /// 构造函数
  const CustomBottomNavigationBar({
    super.key,
    required this.currentIndex,
    required this.onTap,
  });

  /// 导航项图标
  static const List<IconData> _icons = [
    Icons.home_outlined,
    Icons.dashboard_outlined,
    Icons.qr_code_scanner,
    Icons.message_outlined,
    Icons.person_outlined,
  ];

  /// 导航项标签
  static const List<String> _labels = ['首页', '工作台', '', '消息', '我的'];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 70, // 增加导航栏高度，为凸出的按钮留出空间
      child: Stack(
        clipBehavior: Clip.none, // 允许子元素超出边界
        children: [
          // 底部导航栏背景
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              height: 60,
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 10,
                    offset: const Offset(0, -2),
                  ),
                ],
              ),
            ),
          ),
          // 导航栏项目
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildNavItem(0),
                _buildNavItem(1),
                // 中间留空给凸起按钮
                const SizedBox(width: 60),
                _buildNavItem(3),
                _buildNavItem(4),
              ],
            ),
          ),
          // 中间凸起按钮 - 工作台
          Positioned(
            left: 0,
            right: 0,
            bottom: 30, // 调整位置使按钮完全凸出导航栏
            child: Center(
              child: GestureDetector(
                onTap: () {
                  // 切换到工作台页面
                  // onTap(1); // 索引1对应工作台页面
                  // 导航到扫描页面
                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => const ScanPage())
                  ).then((result) {
                    if (result != null) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('扫描结果: $result')),
                      );
                    }
                  });
                },
                child: Container(
                  width: 60, // 进一步增大按钮尺寸
                  height: 60, // 进一步增大按钮尺寸
                  decoration: BoxDecoration(
                    color: const Color(0xFF0099FF), // 使用与原型图一致的颜色
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 8,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: const Icon(
                    Icons.dashboard_outlined, // 更改为工作台图标
                    color: Colors.white,
                    size: 30, // 进一步增大图标尺寸
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建导航项
  Widget _buildNavItem(int index) {
    // 中间按钮特殊处理
    if (index == 2) return const SizedBox(width: 60);

    // 实际在页面列表中的索引
    final int actualIndex = index > 2 ? index - 1 : index;
    final bool isSelected = currentIndex == actualIndex;

    return InkWell(
      onTap: () => onTap(actualIndex),
      child: Container(
        width: 60,
        padding: const EdgeInsets.only(top: 4), // 减小顶部内边距
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              _icons[index],
              color: isSelected ? AppTheme.primaryColor : Colors.grey,
              size: 23, // 减小图标尺寸
            ),
            const SizedBox(height: 2),
            Text(
              _labels[index],
              style: TextStyle(
                fontSize: 12, // 减小字体大小
                color: isSelected ? AppTheme.primaryColor : Colors.grey,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
